<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <table border="1" cellspacing="0" width="80%" style="text-align: center">
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>图像</th>
          <th>性别</th>
          <th>职位</th>
          <th>入职日期</th>
          <th>最后操作时</th>
        </tr>
        <tr v-for="(emp,index) in emps" :key="index">
          <th>{{index + 1}}</th>
          <th>{{emp.name}}</th>
          <th><img :src="emp.image" width="70px" height="50px" /></th>
          <th>
            <span v-if="emp.gender == 1">男</span>
            <span v-else-if="emp.gender == 2">女</span>
          </th>
          <th>{{emp.job}}</th>
          <th>{{emp.entrydate}}</th>
          <th>{{emp.updatetime}}</th>
        </tr>
      </table>
    </div>
  </body>
</html>
<!-- 1.引入vue.js -->
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>

<!-- 2.创建vue实例 -->
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        emps: [],
      };
    },
    //利用生命周期去获取数据 挂载完毕发送ajax给后台
    mounted(){
        var _this = this;//vue
        //发送ajax
        axios.get("http://localhost:10010/emp/list").then(function(resp){
            //在vue的函数中如果要使用this必须使用箭头函数  向外找一层
            console.log(this)
            
            //为data中的emps赋值上后端传过来的值即可
            console.log(resp)
            _this.emps = resp.data.data;
          
        });
    }
  });
</script>
